<template>
  <el-row class="warp">
    <el-col class="publicNav" :span="3" style="height:100%">
           <router-link to="/layout/device">设备管理</router-link>
           <router-link class="newnava" to="/layout/interfacea">接口管理</router-link>
    </el-col>
    <el-col :span="21" style="height:100%">
        <div class="main-contents-box">
            <div class="main-contents-main">
                <div class="devicewarp">
                      <el-tabs type="border-card" @tab-click="get_data">
                        <el-tab-pane label="串口管理">
                            <el-table class="metable"
                              :data="tableData"
                              stripe
                              size="mini"
                              border
                              style="width: 100%"
                              >
                                  <el-table-column
                                  align='center'
                                    prop="id"
                                    label="接口ID"
                                    >
                                  </el-table-column>
                                  <el-table-column
                                    align='center'
                                    label="数据位">
                                       <template slot-scope="scope" type='index'>
                                              <el-select size="mini" v-model="scope.row.databit" placeholder="请选择">
                                                <el-option
                                                  v-for="item in Databit"
                                                  :key="item"
                                                  :label="item"
                                                  :value="item">
                                                </el-option>
                                              </el-select>
                                      </template>
                                  </el-table-column>
                                  <el-table-column
                                    align='center'
                                    label="终止位">
                                       <template slot-scope="scope" type='index'>
                                              <el-select size="mini" v-model="scope.row.stopbit" placeholder="请选择">
                                                <el-option
                                                  v-for="item in stopBit"
                                                  :label="item"
                                                  :value="item">
                                                </el-option>
                                              </el-select>
                                      </template>
                                  </el-table-column>
                                  <el-table-column
                                    align='center'
                                    label="波特率">
                                       <template slot-scope="scope" type='index'>
                                              <el-select size="mini" value="value" v-model="scope.row.baud" placeholder="请选择">
                                                <el-option
                                                  v-for="item in rate"
                                                  :key="item.value"
                                                  :label="item.label"
                                                  :value="item.value">
                                                </el-option>
                                              </el-select>
                                      </template>
                                  </el-table-column>
                              </el-table>
                              <div class="safebox">
                                  <el-button class="Interfacebtn" size="mini" type="primary" @click="safe" >保存</el-button>
                              </div>
                        </el-tab-pane>
                        <el-tab-pane label="开关量管理">
                                <el-table class="metable"
                                    :data="tableData1"
                                    stripe
                                    border
                                    size="mini"
                                    style="width: 100%"
                                    >
                                        <el-table-column
                                        align='center'
                                          prop="id"
                                          label="接口ID"
                                          >
                                        </el-table-column>
                                        <el-table-column
                                          align='center'
                                          label="接口状态">
                                             <template slot-scope="scope" type='index'>
                                                    <el-select size="mini" v-model="scope.row.param" placeholder="请选择">
                                                      <el-option
                                                        v-for="item in dolist"
                                                        :key="item.name"
                                                        :label="item.name"
                                                        :value="item.value">
                                                      </el-option>
                                                    </el-select>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div class="safebox">
                                        <el-button class="Interfacebtn" size="mini" type="primary" @click="set_do" >保存</el-button>
                                    </div>
                        </el-tab-pane>
                      </el-tabs>
                </div>
            </div>
        </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  data () {
    return {
        tableData: [],
        rate: [{
          value: 2400,
        },{
          value: 4800,
        },{
          value: 9600,
        },{
          value: 19200,
        },{
          value: 38400,
        },{
          value: 57600,
        },{
          value: 115200,
        }],
        URAT:[],
        Databit:[5,6,7,8],
        stopBit:[1,2],
        value:9600,
        tableData1:[],
        dolist:[
          {
            value:0,
            name:"常开"
          },
          {
            value:1,
            name:"常闭"
          }
        ]
    }
  },
  methods: {
    get_pwd(){
        let  pwd; 
        $.ajax({
            url:'../cfg/password.json',
            type:'GET',
            cache:false,
            async: false,
            dataType:'text',
            success:function(result){
                let data = eval("("+result+")");
                pwd = data.password;
            },
            error:function(realdata){                           
            }
        })
        return pwd;
    },
    check_pwd(){
        let username = window.sessionStorage.getItem('username');
        let password = window.sessionStorage.getItem('password');
        let pwd = this.get_pwd();
        if(username == "admin"){
            if(password != pwd){
                this.$message({
                    message: '密码做了更改,请重新登录!',
                    type: 'info',
                    center:true,
                    showClose: true
                });
                this.loginout();
            }
        } 
    },
    loginout(){
        window.sessionStorage.removeItem("username");
        window.sessionStorage.removeItem("password");
     
        this.set_log("用户退出");
        this.$router.push("/login");
    },
    set_log(str){//用户操作日志
        let  msg= {"cmd":"CGI_LOG_SET_OPT","content":str};
        $.ajax({
            url:"cgi-bin/main.cgi",
            contentType: "application/json;charset=utf-8",
            type:"post",
            data:JSON.stringify(msg),
            success:function(msg){           
            }
        })
    },
      get_data(tab,event){
        if(tab.index==0){
             this.get_start();
        }else{
            this.get_do();
        }
      },
      safe(){
        let that=this;
        this.$confirm('此操作危险，修改成功后设备立即重启，是否继续', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'waring'
          }).then(() => {
              this.$ajax.post("./cgi-bin/main.cgi",{"cmd":"CGI_DEVICE_SET_UART","UART":that.$data.tableData}).then(function(res){
                  if(res.data.response==true){
                      that.$message({
                            type: 'success',
                            message: '保存成功,设备即将重启，请稍候...'
                      });
                      that.set_reboot();
                  }else{
                      that.$message({
                            type: 'error',
                            message: '保存失败！'
                      });
                  }
              })
          }).catch(() => {
                that.$message({
                      type: 'error',
                      message: '请求失败！'
                });
          });
      },
      /*获取uart*/
      get_start(){
        let that=this;
        this.$ajax.post("./cgi-bin/main.cgi",{"cmd":"CGI_DEVICE_GET_UART"}).then(function(res){
            that.$data.tableData=res.data;
        }).catch(() => {
                that.$message({
                      type: 'error',
                      message: '请求失败！'
                });
                that.$data.tableData=[];
          });
      },
      /*获取do*/
      get_do(){
        let that=this;
        this.$ajax.post("./cgi-bin/main.cgi",{"cmd":"CGI_DEVICE_GET_DO"}).then(function(res){

            //console.log(res.data);
            that.$data.tableData1=res.data;
        }).catch(() => {
                that.$message({
                      type: 'error',
                      message: '请求失败！'
                });
                that.$data.tableData1=[];
          });
      },
      /*设置do*/
      set_do(){
          let that=this;
          this.$confirm('此操作危险，修改成功后设备立即重启，是否继续', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'waring'
            }).then(() => {
              console.log(that.$data.tableData1);
                this.$ajax.post("./cgi-bin/main.cgi",{"cmd":"CGI_DEVICE_SET_DO","DO":that.$data.tableData1}).then(function(res){
                    if(res.data.response==true){
                        that.$message({
                              type: 'success',
                              message: '保存成功,'
                        });
                        that.set_reboot();
                    }else{
                        that.$message({
                              type: 'error',
                              message: '保存失败！'
                        });
                    }
                })
            }).catch(() => {
                  that.$message({
                        type: 'error',
                        message: '请求失败！'
                  });
            });
      },
      set_reboot(){
          let that = this;
          that.$router.push("/login");
          that.set_log("设备重启");
          $.ajax({
                url:"cgi-bin/JHReboot.cgi",
                contentType: "application/json;charset=utf-8",
                type:"post",
                data:JSON.stringify(""),
                success:function(msg){
                }
            })
        },
        set_log(str){//用户操作日志
          let  msg= {"cmd":"CGI_LOG_SET_OPT","content":str};
          $.ajax({
              url:"cgi-bin/main.cgi",
              contentType: "application/json;charset=utf-8",
              type:"post",
              data:JSON.stringify(msg),
              success:function(msg){           
              }
          })
      }

 
    },
    mounted(){
      this.check_pwd(); 
      this.get_start();
    }
}
</script>
<style>
.metable td, .metable th{
  padding: 5px;
}
.safebox{
  width:100%;
  height:50px;
  position:relative;
  overflow:hidden;
  line-height:center;
}
.Interfacebtn{
  float: right;
  letter-spacing: 2px;
  margin-top:15px;
  width: 70px;
  margin-right: 20px;
}
.devicewarp{
  width:75.5%;
  min-width: 500px;
  max-height: 600px;
  min-height: 300px;
  margin: auto;
  height: auto;
  padding-top: 50px;
}
</style>
